<template>
	<view>
		<!-- <global-contact></global-contact> -->
		<view class="header">
			<image src="https://www.atuanjian.com/appletStatic/static/need/banner.png" mode="aspectFit"></image>
			<view class="head">
				<view class="title">蚂蚁团建</view>
				<view class="title">一站式团建采购平台</view>
			</view>
		</view>
		<view class="wrap">
			<view class="content">
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/need/m1.png" mode="aspectFit"></image>
						<text>定制类型</text>
					</view>
					<view class="right" @click="selectCate">
						<view class="contain">
							<text>{{cateName||'请选择类型'}}</text>
							<image src="https://www.atuanjian.com/appletStatic/static/need/upload.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/need/m2.png" mode="aspectFit"></image>
						<text>公司名称</text>
					</view>
					<view class="right">
						<input type="text" v-model="company" value="" placeholder="请输入" />
					</view>
				</view> 
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/need/m5.png" mode="aspectFit"></image>
						<text>姓      名</text>
					</view>
					<view class="right">
						<input type="text" v-model="userName" value="" placeholder="请输入" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/need/m5.png" mode="aspectFit"></image>
						<text>手机号码</text>
					</view>
					<view class="right">
						<input type="text" v-model="userPhone" value="" placeholder="请输入" />
					</view>
				</view>
				
				<block v-for="(item,index) in customItems" :key="index">
					 
					
					<view class="item" v-if="item.types==1">
						<view class="left">
							<image src="https://www.atuanjian.com/appletStatic/static/need/m5.png" mode="aspectFit"></image>
							<text>{{item.title}}</text>
						</view>
						<view class="right">
							<input type="text" v-model="customItems[index].value" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="item" v-if="item.types==2||item.types==3">
						<view class="left">
							<image src="https://www.atuanjian.com/appletStatic/static/need/m5.png" mode="aspectFit"></image>
							<text>{{item.title}}</text>
						</view>
						<view class="right" @click="simple(item,index)">
							<view class="contain" >
								<text>{{customItems[index].value||'请选择'}}</text>
								<image src="https://www.atuanjian.com/appletStatic/static/need/upload.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					
					<view class="item" v-if="item.types==4">
						<view class="other">
							<view class="xz">
								<view class="left">
									<image src="https://www.atuanjian.com/appletStatic/static/need/m5.png" mode="aspectFit"></image>
									<text>{{item.title}}</text>
								</view>
								<view class="right" @click="any(item,index)">
									<view class="contain">
										<text>{{customItems[index].value|duoxuan}}</text>
										<image src="https://www.atuanjian.com/appletStatic/static/need/upload.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>
							<view class="box">
								<u-checkbox-group
									v-model="customItems[index].value"
									placement="row"
									@change="checkboxChange"
								>
									<u-checkbox
										:customStyle="{marginBottom: '8px'}"
										v-for="(item1, index1) in checkboxList"
										:key="index1"
										:label="item1"
										:name="item1"
									>
									</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>
					<view class="item" v-if="item.types==5">
						<view class="left">
							<image src="https://www.atuanjian.com/appletStatic/static/need/m3.png" mode="aspectFit"></image>
							<text>{{item.title}}</text>
						</view>
						<view class="right" style="margin-left: 20rpx;" @click="selectTime(item,index)">
							<view class="contain">
								<text>{{customItems[index].value|returnVal}}</text>
								<image src="https://www.atuanjian.com/appletStatic/static/need/upload.png" mode="aspectFit"></image>
							</view>
						</view>
						<u-datetime-picker
						  :show="timeShow"
						  v-model="customItems[index].value"
						  mode="date"
						   @cancel="cancel3" @confirm="confirm3" 
						></u-datetime-picker>
					</view>
					<view class="item" v-if="item.types==6">
						<view class="left">
							<image src="https://www.atuanjian.com/appletStatic/static/need/m5.png" mode="aspectFit"></image>
							<text>{{item.title}}</text>
						</view>
						<view class="right">
							<view class="jishu">
								<view class="nums" v-for="(item2,index2) in item.select" :key="index2">
									<text>{{item2}}</text>
									<u-number-box v-model="customItems[index].arr[index2]" :min="0" ></u-number-box>
								</view>
							</view>
						</view>
					</view>
					<view class="item" v-if="item.types==7">
						<view class="left">
							<image src="https://www.atuanjian.com/appletStatic/static/need/m5.png" mode="aspectFit"></image>
							<text>{{item.title}}</text>
						</view>
						<view class="right">
							<view class="price"> 
								<!-- <view class="content"> -->
									<block v-for="(item2,index2) in item.select" :key="index2">
										<u--input
										    placeholder="请输入内容"
										    border="surround"
											type="number"
										    v-model="customItems[index].arr[index2]" 
										  > 
										  </u--input>
										  <block>{{item2}}</block> 
									</block>
								<!-- </view> -->
							</view>
							
						</view>
					</view>
					<view class="item" style="align-items: flex-start;" v-if="item.types==8">
						<view class="left">
							<image src="https://www.atuanjian.com/appletStatic/static/need/m5.png" mode="aspectFit"></image>
							<text>{{item.title}}</text>
						</view>
						<view class="right">
							<u--textarea v-model="customItems[index].value" placeholder="请输入内容" ></u--textarea>
					
						</view>
					</view>
				</block>
				<view class="item">
					<input class="input" v-model="userCode" type="text" value="" placeholder="请输入验证码" />
					<view class="code" :style="{background:color}" v-if="codeTime==30" @click="getCode">{{txt}}</view>
					<!-- <view class="code" v-else>{{codeTime}} S</view> -->
				</view>
				
				<view class="submit" @click="submitNeed">提交需求</view>
			</view>
		</view>
		<u-picker :show="show1" @cancel="cancel1" @confirm="confirm1" :columns="needCate"></u-picker>
		<u-picker :show="show2" @cancel="cancel2" @confirm="confirm2" :columns="customData"></u-picker>
		 
	</view>
</template>

<script>
	let timer=null
	import {customItem,customSubmit,sendCode} from '@/utils/request.js'
	export default {
		data() {
			return {
				userInfo:uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):'',
				customItems:null, //  自定义 需求 项目 
				codeTime:30,  // 倒计时 
				txt:'获取验证码',
				reallyCode:'',
				isSend:true,
				isSubmit:true,
				needCate:[],
				needCateList:[],
				show1:false,
				show2:false,
				customData:[],// 自定义选项 
				customIndex:'',
				checkboxList:[],
				timeShow:false,
				
				category:'',
				company:'',
				userName:'',
				userPhone:'',
				userCode:'',
				color:'linear-gradient(98deg, #FFB850 0%, #FF8000 100%)',
				
				value1:'',  // 备注  
				cateName:''//定制类型 
				
			}
		},
		filters:{
			returnVal(val){ 
				if(val){
					let date=new Date(val)
					let year=date.getFullYear()
					let month=date.getMonth()+1
					let day=date.getDate() 
					if(month<10){
						month='0'+month
					}
					if(day<10){
						day='0'+day
					}
					let real=year+'-'+month+'-'+day
					return real
				}else{
					return '请选择时间'
				}  
			},
			duoxuan(val){
				console.log('数组',val)
				if(!val){
					return '请选择'
				}else{
					let str=''
					val.forEach(val=>{
						str+=val
					})
					return str
				}
			}
		},
		methods: {
			selectCate(){
				this.show1=true
			},
			cancel1(event,index){
				this.show1=false
			},
			confirm1(event){
				// let data=this.needCate[0]
				let index=event.indexs[0]
				// console.log(data,index)
				this.category=this.needCateList[index].id
				this.cateName=this.needCateList[index].title
				
				this.show1=false
				console.log(event,this.category,this.cateName)
			},
			// custom 
			// types 2 3 
			simple(item,index){
				// customData 
				this.customData=[]
				this.customData.push(item.select)
				this.customIndex=index
				this.show2=true
			},
			cancel2(){
				this.show2=false
			},
			confirm2(event){
				// event.value[0]
				this.customItems[this.customIndex].value=event.value[0]
				this.show2=false 
			},
			// 
			any(item,index){
				this.customIndex=index
				this.checkboxList=[] 
				this.checkboxList=item.select
			},
			// 多个
			checkboxChange(e){
				// console.log('多个',e)
				this.customItems[this.customIndex].value=e
			},
			selectTime(item,index){
				this.customIndex=index
				this.timeShow=true
			},
			cancel3(){
				this.timeShow=false
			},
			confirm3(event){
				// console.log(event)
				// console.log('数据源',this.customItems)
				this.timeShow=false
			},
			formate(val){
				return val>9?val:'0'+val
			},
			submitNeed(){
				console.log('提交',this.category)
				if(!this.category){
					uni.showToast({
						title:'请选择定制类型',
						icon:'none'
					})
					return;
				}
				if(!this.company.trim()){
					uni.showToast({
						title:'请输入公司名称',
						icon:'none'
					})
					return;
				}
				if(!this.userName.trim()){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return;
				}
				if(!this.userPhone.trim()){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return;
				}
				if(!this.userCode.trim()){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return;
				}
				
				let arr=[]
				this.customItems.forEach(val=>{
					console.log('开始组装',val) 
					if(val.types==6||val.types==7){
						arr.push(val.arr)
					}else if(val.types==5){
						let date=new Date(val.value)
						let year=date.getFullYear()
						let month=date.getMonth()+1
						let day=date.getDate()
						let real=year+'-'+this.formate(month)+'-'+this.formate(day)
						arr.push(real)
					}else{
						arr.push(val.value)
					}
					if(JSON.stringify(val.verify)!='[]'&&JSON.stringify(val.verify)!='{}'){
						if(val.types==6){
							let res=val.arr.some(item=>{
								if(item>0){
									return true
								}
							})
							if(!res){
								uni.showToast({
									title:'请填写'+val.title,
									icon:'none'
								})
								return
							}
							
						}else if(val.types==7){
							let res=val.arr.every(item=>{
								if(item>0){
									return true
								}
							})
							if(!res){
								uni.showToast({
									title:'请填写'+val.title,
									icon:'none'
								})
							}
							return
						}else{
							if(!val.value){
								uni.showToast({
									title:'请填写'+val.title,
									icon:'none'
								})
							}
						}
					}
				})
				console.log('自定义数据',arr)
				let data={
					token:this.userInfo?this.userInfo.token:'',
					company_name:this.company,
					name:this.userName,
					phone:this.userPhone,
					code:this.userCode,
					category_id:this.category,
					custom:arr
					
				}
				console.log('提交数据',data)
				
				if(!this.isSubmit){
					return
				}
				this.isSubmit=false
				this.customSubmit(data).then(res=>{
					// console.log('res450',res)
					uni.showToast({
						title:'提交成功',
						icon:'success',
						duration:1500
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				}).catch(err=>{
					this.isSubmit=true
				})
				
				
			},
			async customItem(data){
				return await customItem(data)
			},
			async customSubmit(data){
				return await customSubmit(data)
			},
			async sendCode(data){
				return await sendCode(data)
			},
			getCode(){
				if(!this.userPhone.trim()){
					uni.showToast({
						title:'请输入手机号',
						icon:'none',
						duration:2000
					})
					return
				}else if(!/^1[3-9]\d{9}$/.test(this.userPhone.trim())){
					uni.showToast({
						title:'手机号格式有误',
						icon:'none',
						duration:2000
					})
					return
				}else{ 
					if(!this.isSend){
						return
					}
					this.isSend=false
					let data={
						phone:this.userPhone.trim()
					}
					this.sendCode(data).then(res=>{
						uni.showToast({
							title:'验证码10分钟内有效',
							icon:'none',
							duration:2000
						})
						this.color='#CCCCCC'
					}).catch(err=>{
						console.log(err)
					})
				}
			},
			getCustomItem(){
				let data={}
				if(this.userInfo==''){
					data={
						token:''
					}
				}else{
					data={token:this.userInfo.token}
				}
				this.customItem(data).then(res=>{
					// console.log('获取的定制需求',res)
					if(res.category && res.category.length>0){
						let arr=[]
						res.category.forEach(val=>{
							arr.push(val.title)
						})
						this.needCate.push(arr)
						this.needCateList=res.category
					}
					if(res.item&&res.item.length>0){
						res.item.forEach(val=>{ 
							let arr=[]  
							if(val.types==6||val.types==7){
								for(let i=0;i<val.select.length;i++){  
								  arr.push(0)
								}  
								val=Object.assign(val,{arr:arr}) 
							}else if(val.types==5){
								let date=new Date()
								let time=date.getTime()
								val=Object.assign(val,{value:time}) 
							}
							else{
								val=Object.assign(val,{value:''})  
							}
						})
						this.customItems=res.item
						// console.log('当前得到的数据',this.customItems)
					}
				}).catch(err=>{
					
				})
			}
		},
		onLoad() {
			this.getCustomItem()
		},
		onUnload() {
			clearInterval(timer)
		}
	}
</script>

<style lang="scss">
	.header{
		width: 750rpx;
		height: 320rpx;
		position: relative;
		image{
			width: 750rpx;
			height: 320rpx;
		}
		.head{
			width: 750rpx;
			height: 320rpx;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,.4);
			.title{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 50rpx;
				color: #FFFFFF;
				padding-left: 40rpx;
			}
			.title:nth-child(1){
				padding-top: 112rpx;
			}
			.title:nth-child(2){
				margin-top: 16rpx;
			}
		}
	}
	.wrap{
		.content{
			position: relative;
			top: -40rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 40rpx 20rpx 22rpx;
			.item{
				@include flex_style(space-between,center,row nowrap);
				margin-bottom: 24rpx;
				.left{
					@include flex_style(flex-start,center,row nowrap);
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					text{
						width: 170rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #1A1A1A;
					}
				}
				.right{
					width: 450rpx;
					.contain{
						width: 450rpx;
						height: 72rpx;						
						border: 1rpx solid #E1E1E1;
						@include flex_style(space-between,center,row nowrap);
						box-sizing: border-box;
						padding: 0 14rpx 0 20rpx;
						text{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							color: #333333;
						}
						image{
							width: 27rpx;
							height: 15rpx;
						}
					}
					.date{
						height: 72rpx;
						@include flex_style(space-between,center,row nowrap);
						text{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							color: #333333;
						}
						.start{
							width: 212rpx;
							height: 72rpx;
							box-sizing: border-box;
							padding: 0 12rpx 0 20rpx;
							border: 1rpx solid #E1E1E1;
							image{
								width: 27rpx;
								height: 15rpx;
							}
							@include flex_style(space-between,center,row nowrap);
							
						}
					}
					input{
						margin: 0;
						padding: 0;
						width: 450rpx;
						height: 72rpx;
						box-sizing: border-box;
						padding-left: 20rpx;
						outline: none;
						background-color: #FFFFFF;		
						border: 1rpx solid #E1E1E1;
						color: #999999;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
					}
					.jishu{
						@include flex_style(flex-start,center,row wrap);
						.nums{
							margin-bottom: 20rpx;
							width: 480rpx;
							max-width: 480rpx;
							@include flex_style(space-between,center,row nowrap);
						}
					}
					.price{
						 @include flex_style(space-between,center,row nowrap);
						 ::v-deep.u-input{
							 width: 100rpx;
							 border: none!important;
						 }
						 ::v-deep.u-input__content__field-wrapper__field{
							width: 100rpx!important; 
						 }
					}
				}
				.input{
					width: 460rpx;
					height: 72rpx; 
					border: 1rpx solid #E1E1E1;
					outline: none;
					background-color: #FFFFFF;
					box-sizing: border-box;
					padding-left: 20rpx;
					margin-right: 26rpx; 
					color: #999999;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
				.code{
					width: 176rpx;
					line-height: 72rpx;
					background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400; 
					color: #FFFFFF;
					text-align: center;
				}
				.other{
					.xz{
						@include flex_style(space-between,center,row nowrap);
						margin-bottom: 24rpx;
						.left{
							@include flex_style(flex-start,center,row nowrap);
							image{
								width: 40rpx;
								height: 40rpx;
								margin-right: 10rpx;
							}
							text{
								width: 170rpx;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								line-height: 40rpx;
								color: #1A1A1A;
							}
						}
						.right{
							width: 436rpx;
							margin-left: 10rpx;
							.contain{
								width: 436rpx;
								height: 72rpx;						
								border: 1rpx solid #E1E1E1;
								@include flex_style(space-between,center,row nowrap);
								box-sizing: border-box;
								padding: 0 14rpx 0 20rpx;
								text{
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 400;
									line-height: 40rpx;
									color: #333333;
								}
								image{
									width: 27rpx;
									height: 15rpx;
								}
							} 
						}
					}
					.box{
						
					}
				}
			}
			.submit{
				width: 670rpx;
				height: 92rpx;
				background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%); 
				border-radius: 46rpx;	
				margin: 120rpx auto 0;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 92rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	::v-deep.u-checkbox-group{
		flex-flow: row wrap!important;
	}
	::v-deep.u-checkbox{
		margin-right: 20rpx;
	}
</style>
